<template>
  <view class="wrapper row">
    <view class="swipper_wrp" v-if="carousels.length">
      <u-swiper :list="carousels" :height="268" name="imageUrl" :border-radius="0"  @click="swiperJump"></u-swiper>
    </view>
    <view class="top" v-if="!carousels.length">
      <img src="../../static/img/user_bg.png" alt="">
    </view>
    <view class="search row flex-center pd_l_30 pd_r_30" style="justify-content: space-between;">
      <view class="row flex-center select font-28">
        <view style="margin-right: 10upx" @click="showTypeSelect">{{currentType || '本科'}}</view>
        <u-icon name="arrow-down-fill" size="20" color="#2A6AAA"></u-icon>
      </view>
      <u-input v-model="value" class="flex-1 fon4-24 pd_r_30" :height="50"
               confirm-type="search"
               style="padding-left: 30upx"
               @confirm="search"
               placeholder="请输入专业名称进行搜索"/>
      <view class="btn color-active font-24" @click="search">搜索</view>
    </view>
    <view class="main row flex-1">
      <scroll-view scroll-y class="left bg-f2f2f2">
        <view class="item eclipse-1" :class="{active: current_first == item.first_spe_code}"
              :key="item.first_spe_code"
              @click="current_first = item.first_spe_code"
              v-for="item in first">{{item.first_spe_name}}</view>
      </scroll-view>
      <scroll-view scroll-y class="flex-1 pd_l_30">
        <u-cell-group>
          <u-cell-item :title="item.sec_spe_name" value="包含专业" v-for="(item, index) in second"
                       :key="index" @click="toDetail(item)"></u-cell-item>
        </u-cell-group>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {getCurrentFullPath, TOAST} from "../../util/util";
  import {SWIPER_JUMP} from "@/util/util";
  export default {
    data() {
      return {
        value:'',
        first: [],
        second: [],
        current_first: '',
        currentType: '',
        selectList: [],
        carousels: [],
        select: false,
        fill_data: {}
      }
    },

    onLoad(option) {
      if (option.type) {
        this.select = true
        uni.setNavigationBarTitle({
            title: '选择专业'
        });
      }
      if (option.data) {
        this.fill_data = JSON.parse(option.data)
      }
    },

    created() {
      this.getSwiper()
      request({
        url: '/system/wx/dict/type/education',
        token: true,
      }).then(res => {
        this.selectList = res.data
        if (this.selectList.length ) {
          this.currentType = this.selectList[0].dictValue
        } else {
          this.currentType = '本科'
        }
      })
    },

    methods: {
      swiperJump(res) {
        SWIPER_JUMP(this.carousels[res].linkUrl)
      },
      getSwiper() {
        request({
          url: '/system/wx/rotationImage/list',
          token: true
        }).then(res => {
          this.carousels = res.data.filter(item => item.rotationType == '专业百科')
        })
      },
      toDetail(res) {
        if (this.select) {
          this.fill_data.uOrS = this.currentType || '本科'
        }
        this.$u.route({
          url: this.select ?
              `/pages/explore/zhuanye_lei?name=${res.sec_spe_name}&code=${res.sec_spe_code}&data=${JSON.stringify(this.fill_data)}`
              : `/pages/explore/zhuanye_lei?name=${res.sec_spe_name}&code=${res.sec_spe_code}`
        })
      },

      getFirst() {
        request({
          url: '/system/wx/CompassSpecialty/getFirstSpecialtyList/' + this.currentType,
          token: true
        }).then(res => {
          this.first = res.data
          this.current_first = this.first[0].first_spe_code
        })
      },

      getSecond() {
        request({
          url: '/system/wx/CompassSpecialty/getSecSpecialtyList/' + this.current_first,
          token: true
        }).then(res => {
          this.second = res.data
        })
      },

      showTypeSelect() {
        var itemList = this.selectList.map(item => item.dictValue)
        var _this = this
        uni.showActionSheet({
          itemList: itemList,
          success: function (res) {
            _this.currentType = itemList[res.tapIndex]
          },
          fail: function (res) {
            console.log(res.errMsg);
          }
        });
      },

      search() {
        if (this.select) {
          this.fill_data.uOrS = this.currentType || '本科'
        }
        this.$u.route({
          url: this.select ?
              `/pages/explore/zhuanye_lei?k=${this.value}&s=true&data=${JSON.stringify(this.fill_data)}`
              : `/pages/explore/zhuanye_lei?k=${this.value}&s=true`
        })
      }
    },

    watch: {
      current_first(newVal) {
        if (newVal) {
          this.getSecond()
        }
      },

      currentType(newVal) {
        if (newVal) {
          this.getFirst()
        }
      }
    },
    onShareAppMessage(res) {}
  }
</script>

<style scoped lang="scss">
  $active: #2A6AAA;
  page {
    height: 100%;
  }
  .wrapper {
    flex-direction: column;
    height: 100%;
    .top {
      width: 100%;
      height: 280upx;
      position: relative;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .search {
      background:  rgba(249, 249, 249, 100);
      padding-top: 20upx;
      padding-bottom: 20upx;
      padding-left: 20upx;
      .flex-1 {
        background: #fff;
        border-radius: 25upx;
        margin-right: 20upx;
      }
      .select {
        width: 200upx;
      }
    }
    .main {
      .left {
        width: 200upx;
        height: 100%;
        .item {
          height: 90upx;
          line-height: 90upx;
          text-align: center;
          font-size: 28upx;
          color: #666;
        }
        .active {
          background: #fff;
          color: $active;
          font-weight: bold;
        }
      }
      .flex-1 {
        height: 100%;
      }
    }
  }
</style>
